<template>
  <div class="index">
    <mt-header>
      <!-- <div slot="left">教师端</div> -->
      <mt-button slot="right">
        <div class="userBox">
          <span class="user">{{ userName }}</span>
          <span class="out link" @click="signOut">退出</span>
        </div></mt-button
      >
    </mt-header>
    <div class="noBox"></div>
    <div class="square">
      <ul class="square-inner flex">
        <li v-for="item in listData" :key="item.id" @click="go(item)">
          <span :class="['iconBg', 'icon_' + item.id]"></span>
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>

    <mt-popup position="right" class="index-mint-popup" v-model="popupVisible">
      <ul>
        <li v-for="item in popupMenu" :key="item.id" @click="go(item)">
          <img :src="item.icon" />
          {{ item.name }}
        </li>
      </ul>
    </mt-popup>
    <div class="line"></div>
    <div v-if="messageData && messageData.length > 0" class="messageBox">
      <div class="title">我的消息</div>
      <ul>
        <li v-for="item in messageData" :key="item.id">
          {{ item.title }}
          <p>{{ item.info }}</p>
        </li>
      </ul>
    </div>

    <div class="bottomNav g-flexbox">
      <div class="box g-flex">
        <svg
          t="1629959546993"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2113"
          width="200"
          height="200"
        >
          <path
            d="M1007.072 542.48L512.016 79.152 16.96 541.12c-9.68 9.04-10.224 24.24-1.168 33.92 9.04 9.68 24.24 10.224 33.92 1.168l462.272-431.36L974.272 577.52a23.942 23.942 0 0 0 16.4 6.48c6.4 0 12.8-2.544 17.52-7.6 9.056-9.68 8.56-24.864-1.12-33.92zM856 552c-13.248 0-24 10.752-24 24v368H640V688H384v256H192V576c0-13.248-10.736-24-24-24s-24 10.752-24 24v416h288V736h160v256h288V576c0-13.248-10.752-24-24-24zM688 208h144v128c0 13.264 10.752 24 24 24s24-10.736 24-24V160H688c-13.248 0-24 10.736-24 24s10.752 24 24 24z"
            fill="#1296db"
            p-id="2114"
          ></path>
        </svg>
        <p>
          首页
        </p>
      </div>
      <div class="box g-flex" @click="goMessage">
        <svg
          t="1629962688278"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5871"
          width="200"
          height="200"
        >
          <path
            d="M520.789333 149.333333C727.68 149.333333 896 288.106667 896 458.666667S727.68 768 520.789333 768c-24.064 0-48.810667-2.112-73.6-6.250667a109.994667 109.994667 0 0 0-17.92-1.493333c-15.146667 0-29.781333 3.114667-43.477333 9.28l-4.394667 1.984-4.053333 2.624L277.333333 838.698667V695.125333l-23.018666-19.2C184.192 617.429333 145.578667 540.266667 145.578667 458.666667c0-170.56 168.32-309.333333 375.210666-309.333334m0-64C278.208 85.333333 81.578667 252.48 81.578667 458.666667c0 104.384 50.517333 198.656 131.754666 266.389333v153.365333A42.538667 42.538667 0 0 0 273.493333 917.333333l138.538667-89.429333c5.461333-2.453333 11.306667-3.648 17.216-3.648 2.453333 0 4.906667 0.213333 7.36 0.618667 27.264 4.565333 55.36 7.125333 84.181333 7.125333C763.349333 832 960 664.853333 960 458.666667S763.349333 85.333333 520.789333 85.333333z"
            fill="#000000"
            p-id="5872"
          ></path>
          <path
            d="M661.333333 362.666667H384a21.333333 21.333333 0 0 1 0-42.666667h277.333333a21.333333 21.333333 0 0 1 0 42.666667zM661.333333 490.666667H384a21.333333 21.333333 0 0 1 0-42.666667h277.333333a21.333333 21.333333 0 0 1 0 42.666667zM661.333333 618.666667H384a21.333333 21.333333 0 0 1 0-42.666667h277.333333a21.333333 21.333333 0 0 1 0 42.666667z"
            fill="#000000"
            p-id="5873"
          ></path>
        </svg>
        <p>
          消息
        </p>
      </div>
      <div class="box g-flex" @click="goNotice">
        <svg
          t="1629962760304"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7738"
          width="200"
          height="200"
        >
          <path
            d="M913.926534 306.929438c-34.841529-63.1032-84.71031-116.042923-144.194076-153.084561-6.061043-3.857864-11.45489-6.427386-18.08489-6.427386-16.757662 0-30.391171 14.431687-30.391171 32.1707 0 12.040221 6.257517 22.553669 17.10047 28.801976 104.863303 64.952314 170.005952 185.193863 170.005952 313.797869 0 128.48428-65.080228 248.671593-169.782871 313.62186-8.66638 5.050016-17.927301 15.391549-17.927301 29.275767 0 17.739013 13.658068 32.1707 30.446429 32.1707 7.073092 0 12.658298-3.054569 17.785062-6.192026 59.742662-37.002752 109.819175-89.979314 144.816247-153.200194 36.057217-65.137533 55.116295-139.717112 55.116295-215.678154C968.816678 446.399933 949.836395 371.963617 913.926534 306.929438zM803.242665 522.18906c0-44.717458-11.232832-88.62241-32.481785-126.96774-20.623713-37.2156-50.127677-68.388577-85.322248-90.149183l-0.10847-0.064468c-1.02433-0.564865-10.200316-5.520737-17.015535-5.520737-16.879436 0-30.611182 14.480806-30.611182 32.279171 0 11.665691 5.8001 22.472827 15.155165 28.212552 54.896284 33.086559 89.00001 95.240131 89.00001 162.208359 0 68.366064-35.157731 131.180691-91.75475 163.933653l-0.100284 0.061398c-9.143241 5.863545-14.601556 16.182564-14.601556 27.602661 0 17.830087 13.707187 32.336476 30.531364 32.336476l0.162706 0.001023c0.001023 0 0.001023 0 0.001023 0 7.096628 0 15.121396-4.170996 15.459087-4.348028l0.11461-0.064468C756.659721 697.290053 803.242665 613.174284 803.242665 522.18906zM550.366308 75.543533c-4.938476-2.527566-10.45205-3.864004-15.941064-3.864004-8.256034 0-16.358573 2.992147-22.808472 8.42181l-0.145309 0.121773c-5.265934 4.438079-52.949956 44.529169-104.874559 85.10326-93.812619 73.362868-122.260531 86.464257-127.851876 88.575338L159.5933 253.901711c-0.782829 0-1.485841 0.053212-2.139733 0.110517l-60.977793 0c-16.788361 0-30.445406 14.419408-30.445406 32.144094l0 472.503451c0 17.70729 13.658068 32.113395 30.445406 32.113395l204.416669 0.059352c5.431709 2.260483 32.210609 15.781428 115.359354 87.7526 28.380374 24.549116 61.175291 54.086849 92.342128 83.173304 0.826831 0.771573 1.36509 1.27197 1.592264 1.479701l0 0.001023c6.668886 6.316869 15.270798 9.795087 24.221658 9.795087 5.106298 0 10.298554-1.183965 15.020088-3.428076 13.477966-6.433526 22.533202-20.562315 22.533202-35.150568 0.00307-1.576915 0.291642-157.672042 0.291642-160.783917 0-3.175319-1.301645-656.819317-1.314948-663.416572C570.936809 95.360881 563.055305 82.060971 550.366308 75.543533zM510.864642 768.479419l-0.466628 102.921068c-15.527648-13.923104-30.552853-27.123754-44.726667-39.289841-113.78244-97.821933-142.303007-106.007359-161.762197-106.007359-0.385786 0-0.703011 0.048095-0.935302 0.083911-0.060375 0.00921-0.12075 0.021489-0.13917 0.025583-0.063445-0.005117-0.12382-0.017396-0.184195-0.025583-0.231267-0.035816-0.548492-0.083911-0.934279-0.083911L148.03301 726.103286c-17.677615 0-21.494547-4.28356-21.494547-24.121374L126.538463 339.353918c0-13.921058 1.487887-20.479427 15.084557-20.479427l138.452305 0c18.941398 0 47.839565-8.090259 172.184571-104.774275 18.978237-14.756075 38.977733-30.639834 58.115606-46.155203C510.425643 227.891314 510.864642 766.102279 510.864642 768.479419z"
            p-id="7739"
          ></path>
        </svg>
        <p>
          公告
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import local from '@/utils/localstorage'
import teacherIcon from '@/assets/teacherIcon.png'
import stuIcon from '@/assets/stuIcon.png'
import { Indicator } from 'mint-ui'
import { manageMessage } from '@/api'
import request from '@/utils/request'

export default {
  name: 'index',
  data() {
    return {
      ajax: { pageNum: 1, pageSize: 5 },
      messageData: [],
      userName: '',
      popupVisible: false,
      popupMenu: [],
      listData: [
        {
          name: '教师/学生信息',
          id: '1',
          menu: [
            { name: '教师信息', id: '1', path: '/manage/teacherInfo', icon: teacherIcon },
            { name: '学生信息', id: '2', path: '/manage/stuInfo', icon: stuIcon }
          ]
        },
        {
          name: '培养计划',
          id: '2',
          path: '/manage/training'
        },
        {
          name: '教师课表',
          id: '3',
          path: '/manage/teacherCourse'
        },
        {
          name: '学生总成绩单',
          id: '4',
          path: '/manage/achievement'
        },
        {
          name: '开题报告信息',
          id: '5',
          path: '/manage/opening'
        },
        {
          name: '中期检查信息',
          id: '6',
          path: '/manage/midexam'
        },
        {
          name: '预答辩信息',
          id: '7',
          path: '/manage/reply'
        },
        {
          name: '学生科研成果',
          id: '8',
          path: '/manage/research'
        },
        {
          name: '毕业论文信息',
          id: '9',
          path: '/manage/paper'
        }
      ]
    }
  },
  methods: {
    go(item) {
      this.popupMenu = []
      if (!item.path) {
        this.popupVisible = true
        this.popupMenu = item.menu
        return
      }
      this.$router.push({ path: item.path })
    },

    goMessage() {
      this.$router.push({ path: '/message' })
    },
    goNotice() {
      this.$router.push({ path: '/notice' })
    },
    signOut() {
      local.clear()
      window.location.href = `${process.env.LOGIN_URL}#/login`
    },
    getMessage() {
      Indicator.open()
      const param = this.ajax
      request
        .post(manageMessage, param)
        .then((res) => {
          Indicator.close()
          const r = res.data
          if (r && r.data) {
            this.messageData = r.data.rows
          }
        })
        .catch((err) => {})
    }
  },
  mounted() {
    Indicator.close()
    if (local.get('USER')) {
      this.userName = local.get('USER').xm || local.get('USER').name || ''
    }
    this.getMessage()
  }
}
</script>

<style scoped lang="less">
@import url('../../../assets/styles/base.less');
.index {
  background-image: url('../../../assets/banner.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  .mint-header {
    background-color: rgba(38, 162, 255, 0.5);
  }
  .noBox {
    margin: (20 / @base);
    margin-bottom: (0 / @base);
    padding-top: (60 / @base);
  }
  .link {
    color: rgb(224, 224, 224);
  }
  .userBox {
    font-size: inherit;
    span {
      display: inline-block;
      height: (40 / @base);
      line-height: (40 / @base);
    }
    .user {
      padding-left: 25px;
      background-image: url('../../../assets/usericon.png');
      background-repeat: no-repeat;
      background-size: auto 16px;
      background-position: left;
      margin-right: (20 / @base);
    }
  }

  .square {
    position: relative;
    margin: 0 auto;
    width: 90%;
    height: (500 / @base);
  }
  .square-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
  }
  .square-inner > li {
    width: calc(98% / 3); /* calc里面的运算符两边要空格 */
    height: (140 / @base);
    margin-right: 1%;
    margin-bottom: (0 / @base);
    overflow: hidden;
  }
  .flex {
    display: flex;
    flex-wrap: wrap;
  }
  .flex > li {
    flex-grow: 1; /* 子元素按1/n的比例进行拉伸 */
    //background-color: #4d839c;
    text-align: center;
    //color: #fff;
    font-weight: 500;
    line-height: 2;
    font-size: (28 / @base);
  }
  .flex > li:nth-of-type(3n) {
    /* 选择个数是3的倍数的元素 */
    margin-right: 0;
  }
  .flex > li:nth-of-type(n + 7) {
    /* 选择倒数的三个元素，n可以取0 */
    margin-bottom: 0;
  }
  .iconBg {
    border-radius: (5 / @base);
    margin: 0 auto 10px auto;
    display: block;
    width: (96/1.5 / @base);
    height: (96/1.5 / @base);
    background-image: url('../../../assets/icon.png');
    background-repeat: no-repeat;
    background-size: (750/1.5 / @base) auto;
  }
  .icon_1 {
    background-position: (-181/1.5 / @base) (-376/1.5 / @base);
  }
  .icon_2 {
    background-position: (-34/1.5 / @base) (-220/1.5 / @base);
  }
  .icon_3 {
    background-position: (-618/1.5 / @base) (-532/1.5 / @base);
  }
  .icon_4 {
    background-position: (-618/1.5 / @base) (-66/1.5 / @base);
  }
  .icon_5 {
    background-position: (-34/1.5 / @base) (-840/1.5 / @base);
  }
  .icon_6 {
    background-position: (-180/1.5 / @base) (-994/1.5 / @base);
  }
  .icon_7 {
    background-position: (-472/1.5 / @base) (-530/1.5 / @base);
  }
  .icon_8 {
    background-position: (-36/1.5 / @base) (-376/1.5 / @base);
  }
  .icon_9 {
    background-position: (-34/1.5 / @base) (-66/1.5 / @base);
  }
  .index-mint-popup {
    width: (260 / @base);
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.8);
    ul {
      padding-top: (50 / @base);
    }
    li {
      padding: (15 / @base) (45 / @base);
      line-height: (45 / @base);
      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
      img {
        width: (30 / @base);
        vertical-align: middle;
      }
    }
  }

  .messageBox {
    padding: (30 / @base);
    padding-bottom: (120 / @base);
    line-height: (45 / @base);
    .title {
      font-weight: bold;
      font-size: (36 / @base);
      margin: (5 / @base) 0 (5 / @base) 0;
    }
    li {
      padding: (20 / @base) 0;
      border-bottom: 1px solid #e8e8e8;
      p {
        margin-top: (10 / @base);
        color: #999;
      }
    }
    li:last-of-type {
      border: none;
    }
  }
  .bottomNav {
    position: fixed;
    max-width: (750 / @base);
    width: 100%;
    bottom: 0;
    font-size: (16 / @base);
    height: (90 / @base);
    background: #fff;
    border-top: 1px solid #e7e7e7;

    .box {
      padding-top: (10 / @base);
      height: (80 / @base);
      text-align: center;
    }
    svg {
      width: (50 / @base);
      height: (40 / @base);
      background: #fff;
    }
  }
}
</style>
